<template>
<!-- 容器 -->
  <div id="wangeditor">
    <div ref="editorElem"></div>
  </div>
</template>

<script>
  import { getImgList } from './../api/guide'
  import E from "wangeditor";
  export default{
    data(){
      return{
        editor: null,
        content:'',
      }
    },
    props:{
      editorContent: {
        type: String,
        default: ''
      },
    },
    model:{
      prop:"editorContent",
      event:"change"
    },
    
    methods:{
      setEditor(){
        const editor = new E(this.$refs.editorElem);//获取组件并构造编辑器

        // 配置触发 onchange 的时间频率，默认为 200ms
        editor.config.onchangeTimeout = 500; // 修改为 500ms
        editor.config.zIndex = 10;
        // 配置 onchange 回调函数，将数据同步到 vue 中
        editor.config.onchange = (newHtml) => {
          // console.log(newHtml);
          this.content = newHtml;
          this.$emit("change",this.content)
          // console.log(this.content);
        };
        // editor.txt.html(this.editorContent)
         // 图片上传
        editor.config.uploadFileName = 'file'
        // editor.config.headers.Authorization = '6a77998089b8467d83d2094a8011b02d'
        editor.config.customUploadImg = (resultFiles, insertImgFn) => {
          //拿到上传的文件 
          const formData = new FormData();
          formData.append('file', resultFiles[0]);
          // var fileName = resultFiles[0];
          // console.log(fileName)
          getImgList(formData,'editor').then((res) => {
            console.log(res)
            if(res.code == 200){
              insertImgFn(res.result.absoluteUrl)
            }
          });
          // console.log(resultFiles);
          //将上传的文件转成url传入insertImgFn方法 例如下面的阿里云OSS
          // insertImgFn(
          //   "http://im.51db.com:23102/cyz-web/api/v1/file/uploadImage?category=editor"
          // );
        };
        // 默认情况下，显示所有菜单
        editor.config.menus = [
          'head',
          'bold',
          'fontSize',
          'italic',
          'underline',
          'strikeThrough',
          'indent',
          'lineHeight',
          'foreColor',
          'backColor',
          'link',
          'list',
          'todo',
          'justify',
          'quote',
          'emoticon',
          'image',
          'video',
          'table',
          'code',
          'splitLine',
          'undo',
          'redo'
        ];
        // 配置全屏功能按钮是否展示
        editor.config.showFullScreen = false;
        // 自定义配置颜色（字体颜色、背景色）
        editor.config.colors = [
          '#000000',
          '#595959',
          '#8C8C8C',
          '#BFBFBF',
          '#D9D9D9',
          '#E9E9E9',
          '#F5F5F5',
          '#FFFFFF',
          '#F5222D',
          '#FA8C16',
          '#FADB14',
          '#52C41A',
          '#13C2C2',
          '#2F54EB',
          '#722ED1',
          '#EB2F96',
          '#FFE8E6',
          '#FFEFD1',
          '#FCFCCA',
          '#E4F7D2',
          '#D3F5F0',
          '#DEE8FC',
          '#EFE1FA',
          '#FAE1EB',
          '#FFA39E',
          '#FFD591',
          '#FFFB8F',
          '#B7EB8F',
          '#87E8DE',
          '#ADC6FF',
          '#D3ADF7',
          '#FFADD2',
          '#CF1322',
          '#D46B08',
          '#D4B106',
          '#389E0D',
          '#08979C',
          '#1D39C4',
          '#531DAB',
        ]
        this.editor = editor;
        this.editor.create(); // 创建富文本实例
      },
    },
    watch:{
      editorContent:{
        handler(newVal ,oldval){
          console.log(newVal);
          // if (newVal !== this.editor.txt.html()) {
          this.editor.txt.html(this.editorContent)
        // }
        }
      }
    },
    mounted() {
      this.setEditor();
    
  }
   }
</script>
